<template>
	<div class="ui-goods-specs" @mouseenter="showConfirm = true" @mouseleave="showConfirm = false">
		<div style="position: relative; z-index: 1;">
			<ui-box class="specs-cells" solid :radius="false">
				<div class="specs-cells-item" style="margin-bottom: 5px;">
					<div class="label">规格名称</div>
					<div class="value">详细规格(规格值)，重复规格值无效</div>
				</div>
				<div class="specs-cells-item">
					<div class="label">
						<Input v-model="specs[0].name" @on-blur="handleCreateSpce" />
					</div>
					<div class="value">
						<InputTags v-model="specs[0].value" :disabled="!specs[0].name" :color="colors[0]" @change="handleCreateSpce" />
					</div>
					<div class="action">
						<Button type="primary" disabled><Icon type="ios-trash-outline" :size="18" /></Button>
					</div>
				</div>
				<div class="specs-cells-item" v-show="specs[0].value.length > 0">
					<div class="label" style="color: #333;">
				        <Checkbox label="规格图片" v-model="spec_is_show" :true-value="1" :false-value="0">规格图片</Checkbox>
				        <Checkbox label="图片展示" v-model="img_is_show" :true-value="1" :false-value="0" style="margin-top: 10px;">图片展示</Checkbox>
					</div>
					<div class="value" v-if="spec_is_show">
						<div class="choose-spec-image" v-for="(item, index) in specs[0].value">
							<SelectImage :src="specs[0].imgs[index]" @click="handleOpenGallery(index)" />
							<p>{{ item }}</p>
						</div>
					</div>
				</div>
				<div class="specs-cells-item" v-for="(item, index) in specs" v-if="index != 0">
					<div class="label">
						<Input v-model="item.name" @on-blur="handleCreateSpce" />
					</div>
					<div class="value">
						<InputTags v-model="item.value" :disabled="!item.name" :color="colors[index]" @change="handleCreateSpce" />
					</div>
					<div class="action">
						<Button type="primary" @click="handleDeleteSpec(index)"><Icon type="ios-trash-outline" :size="18" /></Button>
					</div>
				</div>
				<div class="specs-cells-item">
					<div class="label">
						<Button :disabled="specs.length >= 3" type="success" style="width: 100px;" @click="handleAddSpec">新增规格</Button>
					</div>
					<div class="value">
						<p class="ui-text-primary" style="line-height: 32px;">请注意，在商品建档页面新增加的规格名称和规格属性不影响系统预设规格和属性</p>
						<!--<p v-if="specs.length >= 3" style="line-height: 32px;">最多支持 3 组规格</p>-->
					</div>
				</div>
			</ui-box>
			<div v-if="skus.length > 0">
				<p style="margin: 15px 0 5px; font-size: 14px;">规格明细</p>
				<Table :columns="columns" :data="skus" border>
					<template slot-scope="{ row }" slot="spec">
			            <template v-for="(item, index) in row.spec">
			            	<span v-if="index != 0" style="margin: 0 6px;">·</span>
			            	<span :style="{color: colors[index]}">{{ item.value }}</span>
			            </template>
			        </template>
			        <template slot-scope="{ row, index }" slot="price">
			            <InputNumber v-model="skus[index].purchasing_price" :min="0" :step="1" :precision="2" style="width: 100%;" />
			        </template>
			        <template slot-scope="{ row, index }" slot="retail_price">
			            <InputNumber v-model="skus[index].shop_price" :min="0" :step="1" :precision="2" style="width: 100%;" />
			        </template>
			        <template slot-scope="{ row, index }" slot="stock">
			            <InputNumber v-model="skus[index].number" :min="0" :step="1" :precision="0" style="width: 100%;" />
			        </template>
			        <template slot-scope="{ row, index }" slot="weight">
			            <InputNumber v-model="skus[index].weight" :min="0" :step="1" :precision="2" style="width: 100%;" />
			        </template>
			        <template slot-scope="{ row, index }" slot="sn">
			            <Input v-model="skus[index].sn" />
			        </template>
			        <div
			        	slot-scope="{ row, index }"
			        	slot="action"
			        	class="lock-btn"
			        	:class="{lock: row.is_lock}"
			        	@click="skus[index].is_lock = (row.is_lock ? 0 : 1)"
			        >
			        	{{ row.is_lock ? '解锁' : '锁定'}}
					</div>
				</Table>
			</div>
		</div>
		
		<!-- 修改时需要点击确认 -->
		<div class="ui-goods-specs-confirm" v-if="showConfirm && isConfirm">
			<p style="margin-bottom: 20px; font-size: 14px;">规格数据发生变化时会清空已有的规格数据，请谨慎操作</p>
			<Button type="primary" @click="isConfirm = false">确认操作</Button>
		</div>
		
		<MaterialLibrary v-model="showGallery" :max="1" @change="handleGetImage"></MaterialLibrary>
	</div>
</template>

<script>
import InputTags from '@/components/form/InputTags.vue';
import SelectImage from '@/components/SelectImage.vue';
import SetSpecInput from './SetSpecInput.vue';
import MaterialLibrary from '@/components/MaterialLibrary.vue';
export default {
	name: 'goodsSpecs',
	components: {
		InputTags,
		SelectImage,
		SetSpecInput,
		MaterialLibrary
	},
	data() {
		return {
			showGallery: false,
			showConfirm: false,
			isConfirm: false,
			currentIndex: 0,
			colors: ['#57c78f', '#16a2ff', '#fc573b'],
			columns: [
				{
					title: '规格',
					slot: 'spec',
					className: 'spec-info-td'
				},
				{
					title: '进货价',
					slot: 'price',
					renderHeader: (h, params) => {
						return h(SetSpecInput, {
							props: {
								title: '进货价',
								type: 'money'
							},
							on: {
								change: (value) => {
									this.skus = this.skus.map(item => {
										item.purchasing_price = value;
										return item;
									})
								}
							}
						})
					}
				},
				{
					title: '零售价',
					slot: 'retail_price',
					renderHeader: (h, params) => {
						return h(SetSpecInput, {
							props: {
								title: '零售价',
								type: 'money'
							},
							on: {
								change: (value) => {
									this.skus = this.skus.map(item => {
										item.shop_price = value;
										return item;
									})
								}
							}
						})
					}
				},
				{
					title: '库存',
					slot: 'stock',
					renderHeader: (h, params) => {
						return h(SetSpecInput, {
							props: {
								title: '库存(件)'
							},
							on: {
								change: (value) => {
									this.skus = this.skus.map(item => {
										item.number = value;
										return item;
									})
								}
							}
						})
					}
				},
				{
					title: '重量',
					slot: 'weight',
					renderHeader: (h, params) => {
						return h(SetSpecInput, {
							props: {
								title: '重量(kg)',
								precision: 2
							},
							on: {
								change: (value) => {
									this.skus = this.skus.map(item => {
										item.weight = value;
										return item;
									})
								}
							}
						})
					}
				},
				{
					title: '商家货号/条码',
					slot: 'sn'
				},
				{
					title: ' ',
					slot: 'action',
					width: 50,
					className: 'spec-lock-td'
				}
			],
			spec_is_show: 1,
			img_is_show: 1,
			specs: [
				{
					name: '',
					value: [],
					imgs: []
				}
				/*{
					name: '颜色',
					value: [
						{name: '黑色', img: ''},
						{name: '白色', img: ''}
					]
				}*/
			],
			skus: [
				/*{
					sku_name: '',
					shop_price: 0,
					purchasing_price: 0,
					number: 0,
					weight: 0,
					sn: '',
					if_show: 1,
					spec: [
						{id: 0, name: '颜色', value: '黑色'}
					]
				}*/
			]
		}
	},
	mounted() {
		
	},
	methods: {
		setData(specs, skus) {
			
		},
		// 获取数据
		getData() {
			let specs = [];
			let skus = [];
			// 如果有未填写的规格值，提示填写规格值或删除对应规格
			let unInputSpec = false;
			// sku的进货价、零售价、库存为必填
			let skuError = '';
			
			// 获取规格
			this.specs.forEach((item, index) => {
				if(item.name && item.value.length > 0) {
					specs.push({
						name: item.name,
						value: item.value.map((val, i) => {
							if(index == 0) {
								return {name: val, img: item.imgs[i] || ''};
							}
							return {name: val};
						})
					})
				}else{
					// 有未填写规格名称或规格值的列
					unInputSpec = true;
				}
			})
			
			// 获取sku
			/*this.skus.forEach(item => {
				if(item.shop_price <= 0) {
					
				}
			})*/
			
			// 校验
			if(specs.length == 0) {
				this.$Message.error('请添加商品规格');
				return false;
			}
			if(unInputSpec) {
				this.$Message.error('有未填写的规格名称或规格值');
				return false;
			}
			/*if(skuError) {
				this.$Message.error('请填写' + skuError);
				return false;
			}*/
			
			return {skus: this.skus, spec: specs, spec_is_show: this.spec_is_show, img_is_show: this.img_is_show};
		},
		// 打开图库
		handleOpenGallery(index) {
			this.currentIndex = index;
			this.showGallery = true;
		},
		handleGetImage(imgs) {
			if(imgs.length > 0) {
				this.specs[0].imgs[this.currentIndex] = imgs[0].url;
			}else{
				this.specs[0].imgs[this.currentIndex] = '';
			}
		},
		// 新增规格
		handleAddSpec() {
			// 最多可存在三个规格
			if(this.specs.length >= 3) return false;
			this.specs.push({
				name: '',
				value: []
			})
		},
		// 删除规格
		handleDeleteSpec(index) {
			this.specs.splice(index, 1);
			this.handleCreateSpce();
		},
		// 获取规格组合
		handleGetSepcGroups(datas, index, results) {
			if(datas.length == 0) return [];
			index = index || 0;
			results = results || [];
			let temps = [];
			let current = datas[index];
			let currentArr = current.value;
			if(results.length == 0) {
				let images = current.imgs || [];
				temps = currentArr.map((item, i) => {
					return [{name: current.name, value: item, img: images[i] || ''}];
				});
			}else{
				for(let i = 0; i < results.length; i++) {
					for(let k = 0; k < currentArr.length; k++) {
						let temp = results[i].map(item => {
							return item;
						})
						temp.push({
							name: current.name,
							value: currentArr[k]
						});
						temps.push(temp)
					}
				}
			}
			index++;
			if(datas.length == index) {
				return temps;
			}else{
				return this.handleGetSepcGroups(datas, index, temps);
			}
		},
		// 生成规格
		handleCreateSpce() {
			// 校验是否有未填写的规格名称或规格值
			/*let errs = this.specs.filter(item => {
				return !item.name || item.value.length == 0;
			})
			if(errs.length > 0) {
				this.$Message.error('规格名称和规格值不能为空');
				return false;
			}*/
			// 过滤没有规格值得规格组
			let datas = this.specs.filter(item => {
				return item.value.length > 0;
			})
			// 获取规格组合
			let specGroups = this.handleGetSepcGroups(datas);
			this.skus = specGroups.map((items, index) => {
				let values = items.map(item => {
					return item.value;
				})
				return {
					sku_name: values.join(' '),
					shop_price: 0,
					purchasing_price: 0,
					number: 0,
					weight: 0,
					sn: '',
					if_show: 1,
					is_lock: 0,
					spec: items.map((item, id) => {
						item.id = id;
						return item;
					})
				}
			})
		}
	}
}
</script>

<style>
.ui-goods-specs {
	position: relative;
	margin-top: -15px;
}
.ui-goods-specs .ui-goods-specs-confirm {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding-top: 100px;
	text-align: center;
	background-color: rgba(255, 255, 255, .8);
	z-index: 9;
}
.ui-goods-specs .specs-cells {
	color: #999;
}
.specs-cells .specs-cells-item {
	display: flex;
	margin-bottom: 15px;
}
.specs-cells .specs-cells-item:last-child {
	margin-bottom: 0;
}
.specs-cells-item .ui-input-tags, .specs-cells-item input {
	color: #333;
}
.specs-cells-item .label {
	margin-right: 20px;
	width: 100px;
}
.specs-cells-item .value {
	flex: 1;
}
.specs-cells-item .action {
	margin-left: 20px;
}
.specs-cells-item .action .delete {
	display: block;
	width: 48px;
	height: 32px;
	border: 1px solid #e7e7e7;
	border-radius: 3px;
	line-height: 30px;
	background: #f6f6f6 url('') center no-repeat;
}
.choose-spec-image {
	float: left;
	margin-right: 10px;
	text-align: center;
	color: #000;
}

.ui-goods-specs .ivu-table td.spec-info-td {
	background-color: #fffbe1;
}
.ui-goods-specs .ivu-table td.spec-lock-td {
	background-color: #f5f5f5;
	cursor: pointer;
}
.ui-goods-specs .spec-lock-td .lock-btn {
	margin: 0 -16px;
	text-align: center;
}
.ui-goods-specs .spec-lock-td .lock-btn.lock {
	color: #19be6b;
}

.spec-set-poptip {
	padding: 10px 0;
	white-space: normal;
}
.spec-set-poptip .title {
	margin-bottom: 5px;
	font-size: 14px;
}
.spec-set-poptip .btn-box {
	margin-top: 10px;
	text-align: right;
}
</style>